<template>
  <d2-container>
    <section class="helloing">
      <div style="position:absolute;left:0;top:0;z-index:999;width:100%;">
        <div class="header" style="display:flex;justify-content:flex-start;align-items: center;margin-top:1%">
          <img src="../../../assets/1-8-1.png" style="width:200px;margin-left:3%;" alt="">
        </div>
      </div>
      <section class="mains" style="position: relative;">
        <main>
          <section class="rights" style="position:relative;width:100px;" v-if="login == '2'">
            <el-card class="box-card">
              <p>
                <span style="margin-right:10px;text-align:right;">账 号</span>
                <el-input size="small" placeholder="请输入账号" v-model="dataForm.user" style="width:240px;"></el-input>
              </p>
              <p>
                <span style="margin-right:10px;text-align:right;">密 码</span>
                <el-input type="password" size="small" placeholder="请输入密码" v-model="dataForm.password"
                          style="width:240px;"></el-input>
              </p>
              <p style="text-align:right;">
                <el-button :loading="loginloading" type="primary" @keyup.enter="submitForm('login')" @click="submitForm('login')" style="width:240px;">
                  立即登陆
                </el-button>
              </p>
            </el-card>
          </section>
          <section class="rights" style="position:relative;" v-if="login == '1'">
            <el-card class="box-card">
              <el-form :model="registerform" :rules="regrules" ref="registerform" label-width="70px">
                <el-form-item label="账号" prop="reguser">
                  <el-input size="small" placeholder="请输入账号" v-model="registerform.reguser"
                            style="width:240px;"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="regpassword">
                  <el-input type="password" size="small" placeholder="请输入密码" v-model="registerform.regpassword"
                            style="width:240px;"></el-input>
                </el-form-item>
                <el-form-item label="QQ号" prop="regqq">
                  <el-input size="small" placeholder="请输入QQ号码" v-model="registerform.regqq"
                            style="width:240px;"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="regphone">
                  <el-input size="small" placeholder="请输入手机号码" v-model="registerform.regphone"
                            style="width:240px;"></el-input>
                </el-form-item>
                <el-form-item label="邀请码" prop="regkey" style="display:none">
                  <el-input disabled size="small" placeholder="请输入邀请码" v-model="registerform.regkey"
                            style="width:240px;"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button :loading="regloading" type="primary" @click="submitForm('register')" style="width:100%;">
                    立即注册
                  </el-button>
                  <span style="color:rgb(64,158,255);cursor: pointer;" @click="logining()">立即登录?</span>
                </el-form-item>
              </el-form>
            </el-card>
          </section>
        </main>
      </section>
    </section>
  </d2-container>
</template>

<script>
  import {register, login} from '@/api/api'
  export default {
    name: "Index",
    data() {
      return {
        drawer: false,
        drawer_: false,
        direction: "ltr",
        activeName: 1,
        login: '',
        disabled: false,
        loginloading: false,
        regloading: false,
        dataForm: {
          user: "",
          password: ""
        },
        registerform: {
          reguser: "",
          regpassword: "",
          regqq: "",
          regphone: "",
          regkey: "",//邀请码
        },
        regrules: {
          reguser: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          regpassword: [
            {required: true, message: '请输入密码', trigger: 'blur'},
            {min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur'}
          ],
          regphone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'}
          ],
          regkey: [
            {required: true, message: '请输入邀请码', trigger: 'blur'}
          ],
        },
        flag: "",
      };
    },
    created(){
      this.keyupEnter()
    },
    methods: {
      logining(){
          window.location.href = 'http://kww.zsfqlm.com/'
      },
      keyupEnter() {
        document.onkeydown = e =>{
          let body = document.getElementsByTagName('body')[0]
          if (e.keyCode === 13 && e.target.baseURI.match('/') && e.target === body) {
            this.submitForm('login')
          }
        }
      },
      submitForm(a) {
        let _this = this
        if (a === "login") {
          _this.loginloading = true
          var loginParams = {
            user: _this.dataForm.user,
            password: _this.dataForm.password,
          }
          login(loginParams).then(res => {
            _this.loginloading = false
            if (res.Status == 200) {
              this.$message.success(res.Message)
              localStorage.setItem('token', JSON.stringify(res.Token))
              localStorage.setItem('userinfo', JSON.stringify(res))
              this.$store.commit('Money', JSON.stringify(res.Money))
              this.$router.push('/index')
            } else {
              this.$message.error(res.Message)
            }
          })
        } else if (a === "register") {
          _this.regloading = true
          //商家注册
          var registerParams = {
            user: _this.registerform.reguser,
            qq: _this.registerform.regqq,
            password: _this.registerform.regpassword,
            userkey: _this.registerform.regkey,
            phone: _this.registerform.regphone
          }
          register(registerParams).then(res => {
            _this.regloading = false
            if (res.Status == 200) {
              this.$message.success(res.Message)
              this.$router.push('/')
            } else {
              this.$message.error(res.Message)
            }
          })
        }
      },
    },
    mounted() {
      console.log(this.$route.query.val);
      if (this.$route.query.val == 'register') {
        this.login = '1'
        console.log(this.login);
        this.registerform.regkey = window.sessionStorage.getItem('k')
      }else if(this.$route.query.val == 'Login'){
        this.login = '2'
        console.log(this.login);
      }
    }
  };
</script>

<style lang="scss">
  .helloing {
    width: 100%;
    height: 100vh;
    background: rgb(242, 242, 242);
    display: flex;
    flex-direction: column;

    .el-collapse-item__content {
      padding-top: 20px;
    }

    .nav {
      height: 77px;
      line-height: 77px;
      background: #468bff;

      nav {
        width: 1000px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;

        > img {
          width: 190px;
        }

        span {
          font-size: 20px;

          font {
            color: #057bff;
            cursor: pointer;
          }
        }
      }
    }

    .mains {
      width: 100%;
      background: url('https://xfq-admin.oss-cn-beijing.aliyuncs.com/wwk/bg.f53421c8.jpg') top center no-repeat;
      background-size: cover;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-around;

      main {
        width: 90%;
        border-radius: 10px;
        display: flex;

        .lefts {
          background: rgb(242, 242, 242);
          -webkit-border-radius: 10px;
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .rights {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          background: transparent;

          .box-card {
            padding: 20px;

            .apply {
              text-align: right;
              color: #0096e0;
              font-size: 12px;
              line-height: 20px;
              margin-bottom: 6px;

              i {
                font-size: 16px;
              }
            }

            .apply:hover {
              text-decoration: underline;
              cursor: pointer;
            }
          }
        }

        .contents {
          width: 340px;
          border-radius: 6px;
          background-color: #fff;
          box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);

          .title {
            height: 45px;
            display: flex;
            align-items: center;
            margin-top: 10px;

            em {
              height: 25px;
              border-left: 1px solid #ccc;
            }

            span {
              height: 100%;
              flex: 1;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 14px;
              border-bottom: 1px solid #ccc;
              cursor: pointer;
            }

            .active {
              border-bottom: 1px solid #00B38A;
              color: #00B38A;
            }
          }

          .el-form {
            width: 320px;
            margin: 20px auto 25px;

            .el-form-item {
              width: 100%;
              display: flex;
              margin-bottom: 15px !important;
            }

            .el-form-item:nth-child(3) {
              padding: 0 !important;
              height: 20px;
            }

            .el-form-item__content {
              margin-left: 0 !important;
              flex: 1;
              display: flex;
              justify-content: space-between;

              > .l {
                flex: 1;
                text-align: left;
                display: flex;
                align-items: center;
              }

              .r {
                justify-content: flex-end;
              }
            }

            .yan {
              margin-left: 10px;
              width: 170px;
              border-radius: 4px;
              background: #8074c5;
              text-align: center;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #fff;
              cursor: pointer;
            }

            .btn {
              width: 100%;
              border-radius: 4px;
              background: #00B38A;
              text-align: center;
              height: 40px;
              line-height: 40px;
              font-size: 18px;
              color: #fff;
              cursor: pointer;
            }
          }
        }

      }
    }
  }

  .ship {
    background: url("../../../assets/79-.jpg");
    background-size: 100% 100%;
    width: 30%;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .ship span {
    font-size: 12px;
    width: 80%;
    display: block;
    margin: 0 auto;
  }

  .index-header-banner {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }

  .index-login {
    background-color: #fff;
    width: 23.5%;
    height: 44.5%;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 45px;
  }

  .index-register {
    background-color: #fff;
    padding-top: 50px;
    padding-left: 20px;
    padding-right: 45px;
    width: 23.5%;
    height: 44.5%;
  }

  .index-register .el-form-item {
    margin-bottom: 18px;
  }
</style>

<style>
  section {
    margin-bottom: 0;
  }

  .el-collapse-item__header {
    width: 95%;
    margin: 0 auto;
  }

  .el-collapse {
    width: 95%;
  }

  .el-collapse-item__content {
    width: 95%;
    margin: 0 auto;
    text-align: left;
  }

  .v-modal {
    z-index: 0 !important;
  }
  .why_good {
    width:300px;
    margin: 10px auto;
    background: url('../../../assets/mg.png');
    background-size: 100% 100%;
    height:100px;
  }
  .why_tool {
    width:300px;
    background: url('../../../assets/xs.png');
    background-size: 100% 100%;
    height:100px;
  }
</style>
